import React, { useState, useContext } from 'react';
import { Input, Checkbox, Popover, Button, Select } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
const Dropdown = (props) => {
  const {
    label,
    placeholder,
    show,
    handleObj,
    index,
    listLength,
    require,
    option = [],
    setData,
  } = props;
  const { handleUpdate, handleSelect, handleRemove, handleUp, handleDown, handleOption } =
    handleObj;
  const content = (
    <div style={{ display: 'flex' }}>
      {index !== 0 && (
        <Button style={{ marginRight: 12 }} onClick={() => handleUp(index)} type="primary">
          上移
        </Button>
      )}
      {index !== listLength - 1 && (
        <Button style={{ marginRight: 12 }} type="primary" onClick={() => handleDown(index)}>
          下移
        </Button>
      )}
      <Button type="primary" onClick={() => handleRemove(index)}>
        删除
      </Button>
    </div>
  );
  return (
    <Popover placement={'bottom'} content={content} trigger="hover">
      <div
        onClick={(e) => {
          e.stopPropagation();
          handleSelect(index);
        }}
        className={`renderSetting_other ${show && 'renderSetting_textSelect'}`}
      >
        {show && (
          <div className="renderSetting_absoluteBox">
            <div className="renderSetting_absoluteTitle">下拉菜单</div>
            <div className="renderSetting_absoluteContent">
              <div className="renderSetting_content_title">标题*</div>
              <div className="renderSetting_content_input">
                <Input
                  onChange={(e) => {
                    e.stopPropagation();
                    handleUpdate({
                      index: index,
                      key: 'label',
                      value: e.target.value,
                    });
                  }}
                  value={label}
                ></Input>
              </div>
              <div className="renderSetting_content_title">默认提示文字</div>
              <div className="renderSetting_content_input">
                <Input
                  onChange={(e) => {
                    e.stopPropagation();
                    handleUpdate({
                      index: index,
                      key: 'placeholder',
                      value: e.target.value,
                    });
                  }}
                  value={placeholder}
                ></Input>
              </div>
              <div className="renderSetting_content_title">选项内容</div>
              {option.map((item, o) => {
                return (
                  <Input
                    suffix={
                      <DeleteOutlined
                        onClick={(e) => {
                          e.stopPropagation();
                          handleOption({
                            type: 'remove',
                            index,
                            optionIndex: o,
                          });
                        }}
                      ></DeleteOutlined>
                    }
                    onChange={(e) => {
                      handleOption({
                        type: 'edit',
                        value: e.target.value,
                        index,
                        optionIndex: o,
                      });
                    }}
                    style={{ marginBottom: 8 }}
                    key={o}
                    value={item}
                  />
                );
              })}
              <Button
                onClick={(e) => {
                  e.stopPropagation();
                  handleOption({
                    type: 'add',
                    index: index,
                  });
                }}
                type="primary"
              >
                +添加选项
              </Button>
              <div className="renderSetting_content_Select">
                <Checkbox
                  checked={require}
                  onChange={(e) => {
                    handleUpdate({
                      index: index,
                      key: 'require',
                      value: e.target.checked,
                    });
                  }}
                >
                  必填项
                </Checkbox>
              </div>
            </div>
          </div>
        )}
        <div className="renderSetting_label">
          {label}
          {require && <span className="renderSetting_required">*</span>}
        </div>
        <Select placeholder={placeholder} style={{ width: '100%', marginBottom: 12 }}></Select>
      </div>
    </Popover>
  );
};
export default Dropdown;
